<template>
	<view class="main">
		<image v-if="data.flag == 1" src="../../../static/proList.png" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;">
		<view v-else style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: #fff;border-radius: 20rpx;"></view>
		<view class="status"
			:class="{'yellow':data.status_text == '进行中','bule':data.status_text == '招标中','grey':data.status_text == '已关闭'}">
			{{data.status_text}}
		</view>
		<span class="money">{{data.flag == 1 ? '置顶' : ''}}</span>
		<view @click="toDetail(data.status)">
			<view style="display: flex; align-items:flex-end;margin-top: 10rpx;position: relative;">
				<span class="text ellipsis">{{data.ProjectNo}}<span class="proName">{{data.name}}</span></span>
				<span class="price">￥{{data.total_price}}</span>
			</view>
			<view class="project">
				<view class="u-line-1" style="width: 500rpx;font-size: 30rpx;position: relative;">
					<image src="../../../static/image/gang.png" mode=""
						style="width: 28rpx;height: 28rpx;top: 6rpx;margin-right: 8rpx;"></image>
						<text>岗位：{{getPostNameFromArray(data.position).toString()}}</text>
				</view>
			</view>
			<view class="project" style="position: relative;">
				<span class="label">
					<image src="../../../static/image/group.png" mode="" style="width: 30rpx;height: 30rpx;top: 6rpx;">
					</image> {{data.cycle}}个{{data.cycle_unit_text}}
				</span>
				<span class="label">
					<image src="../../../static/image/pople.png" mode="" style="width: 32rpx;height: 30rpx;top: 6rpx;">
					</image>{{data.user_count}}
				</span>
				<span class="label">
					<image src="../../../static/image/see.png" mode="" style="width: 34rpx;height: 22rpx;"></image>
					{{data.hits}}
				</span>
			</view>
			<view class="time" style="position: relative;">发布时间：{{conversionTime(data.releasetime)}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: Object
		},
		data() {
			return {
				src_normal: require("@/static/image/normal.png"),
				src_doing: require("@/static/image/doing.png"),
				src_close: require("@/static/image/close.png"),
			}
		},
		onLoad() {

		},
		methods: {
			// 获取岗位名称
			getPostNameFromArray(arr) {
				return arr.map(item => item.name)
			},
			// 去详情页
			toDetail(status) {
				// this.$u.route("/pages/list/proDetail/proDetail", {
				// 	id: this.data.id
				// })
				if (status === "normal") {
					this.$Router.push({
						path: '/x',
						query: {
							id: this.data.id
						}
					})
				}

			},
			// 置顶
			topping(id) {
				this.$emit("topping", id)
			},
			conversionTime(timestamp) {

				var date = new Date(timestamp * 1000); //若时间戳为10位，则需*1000；若时间戳为13位，则不需乘*1000

				var year = date.getFullYear() + '-';

				var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

				var day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';

				var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';

				var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';

				var second = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

				let startDate = year + month + day + hour + minute + second;

				return startDate;

			}
		}

	}
</script>

<style scoped lang="scss">
	.main {
		height: 400px;
		padding: 44rpx 40rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.money {
		display: inline-block;
		position: absolute;
		width: 164rpx;
		line-height: 36rpx;
		text-align: center;
		right: 0rpx;
		top: 10rpx;
		color: #1890ff;
	}

	.price {
		position: absolute;
		color: #1890ff;
		font-size: 36rpx;
		font-weight: bold;
		right: -4rpx;
	}

	.proName {
		font-size: 36rpx;
		color: rgba(0, 0, 0, .8);
		font-weight: 600;
		margin-left: 20rpx;
	}

	.project {
		color: rgba(0, 0, 0, .6);
		margin-top: 20rpx;

	}

	.label {
		font-size: 30rpx;
		margin-right: 40rpx;
	}

	.time {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: rgba(0, 0, 0, .5);
	}

	.status {
		position: absolute;
		width: 100rpx;
		line-height: 44rpx;
		top: 0;
		left: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		border-radius: 0 0 8rpx 8rpx;
	}

	.text {
		display: inline-block;
		width: 500rpx;
		font-size: 28rpx;
		color: #1890FF;
	}

	.ellipsis {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1; //文字上限行
		-webkit-box-orient: vertical;
	}

	.bule {
		background-color: #1890FF;
	}

	.yellow {
		background-color: #FFAB03;
	}

	.grey {
		background-color: #b3cadf;
	}
</style>
